<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { getHomeData } from "../../api/home";
import { HttpStatusCode } from "axios";
import { ElMessage } from 'element-plus';

let homeData = ref<HomeCount>({
  channelCount: 0,
  clueCount: 0,
  peerCount: 0,
  userCount: 0
})

onMounted(() => {
  initData()
})
const initData = async () => {
  const res = await getHomeData()
  if(res.statusCode === HttpStatusCode.Ok) {
    homeData.value = res.data as HomeCount
  } else {
    ElMessage({
      message: '获取失败，请重试',
      type: 'error',
    })
  }
}
</script>

<template>
  <div class="container">
    <div class="countView">
      <div class="viewItem">
        <h3>个人车源</h3>
        <p>{{homeData.channelCount}}</p>
      </div>
      <div class="viewItem">
        <h3>新车线索</h3>
        <p>{{homeData.clueCount}}</p>
      </div>
      <div class="viewItem">
        <h3>同行车源</h3>
        <p>{{homeData.peerCount}}</p>
      </div>
      <div class="viewItem">
        <h3>已有用户</h3>
        <p>{{homeData.userCount}}</p>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .countView {
    width: 100%;
    height: 120px;
    display: flex;
    margin-top: 20px;
    .viewItem {
      width: 120px;
      height: 100%;
      background-color: #4b5cc4;
      border-radius: 12px;
      margin-left: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      //justify-content: center;
      color: #fff;
      & > h3 {
        font-size: 18px;
        margin-top: 30px;
      }
      & > p {
        font-size: 20px;
        margin-top: 10px;
      }
    }
  }
}
</style>